<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <script src="../public/js/vue.js"></script>
    <link href="./css/login.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="../public/elementUI/elementUI.css">
    <!-- 引入组件库 -->
    <script src="../public/elementUI/elementUI.js"></script>
</head>

<body>
    <div id="login">
        <!-- logo图 -->
        <div class="nav"></div>
        <!-- 主体内容 -->
        <div class="content">
            <div class="login">
                <div class="header">
                    <span @click="loginShow" v-bind:class="{active:isloginShow}">LOGIN</span>
                    <a>|</a>
                    <span @click="signShow" v-bind:class="{active:issignShow}">SGIN UP</span>
                </div>
                <div class="nice">NICE TO MEET YOU</div>
                <div class="form">
                    <!-- 登陆表单 -->
                    <el-form v-if="isloginShow" :model="loginForm" status-icon :rules="rules" ref="loginForm"
                        label-width="100px" class="demo-ruleForm">
                        <el-form-item prop="email" style="margin-left: -100px;">
                            <el-input type="email" v-model="loginForm.email" autocomplete="off" placeholder="email">
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="password" style="margin-left: -100px;">
                            <el-input type="password" v-model="loginForm.password" autocomplete="off"
                                placeholder="password"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submit(1)">login</el-button>
                        </el-form-item>
                    </el-form>
                    <!-- 注册表单 -->
                    <el-form v-if="issignShow" :model="registerForm" status-icon :rules="rules" ref="registerForm"
                        label-width="100px" class="demo-ruleForm">
                        <el-form-item prop="email" style="margin-left: -100px;">
                            <el-input type="email" v-model="registerForm.email" autocomplete="off" placeholder="email">
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="verify" style="margin-left: -100px;">
                            <el-input type="verify" v-model="registerForm.verify" autocomplete="off"
                                placeholder="verify" style="width: 63%;">
                            </el-input>
                            <el-button @click="successMessage">get verify</el-button>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="submit(2)">sgin up</el-button>

                        </el-form-item>
                    </el-form>
                </div>

            </div>
        </div>
        <!-- 赞助 -->
        <div class="footer">
            <div class="public">© 2005-2021 www.okpayka.com 版权所有，并保留所有权利</div>
            <div class="pic">
                <image src="./image/footer/163.jpg" />
                <image src="./image/footer/Apple.jpg" />
                <image src="./image/footer/Booking.jpg" />
                <image src="./image/footer/ctrip.jpg" />
                <image src="./image/footer/PayPal.jpg" />
            </div>
        </div>
    </div>
    <script>
        var app = new Vue({
            el: '#login',
            data() {


                return {
                    isloginShow: true, //切换登录和注册
                    issignShow: false,
                    loginForm: {
                        email: '',
                        password: '',
                    },
                    registerForm: {
                        email: '',
                        password: '',
                        verify: ''
                    },
                    rules: {
                        email: [{
                                required: true,
                                message: '请输入邮箱地址',
                                trigger: 'blur'
                            },
                            {
                                type: 'email',
                                message: '请输入正确的邮箱地址',
                                trigger: ['blur', 'change']
                            }

                        ],
                        password: [{
                            required: true,
                            message: '请输入密码',
                            trigger: 'blur'
                        }, ],
                        verify: [{
                            required: true,
                            message: '请输入验证码',
                            trigger: 'blur'
                        }]
                    }
                };
            },
            mounted() {
                this.initUser()

            },
            methods: {

                initUser() {
                    const userList = [{
                        id: '4847423', //用户ID
                        email: 'arcangl22301@aol.com', //用户邮箱
                        tel: '11012011900', //用户手机号
                        pwd: '123456', //密码
                        chatId:'test1',
                        order: [ //订单列表
                            {
                                id: 1621902154325,
                                img: "../public/image/goods/18.jpg",
                                pname: "全民K歌",
                                price: 1000,
                                sum: 1,
                            },
                            {
                                id: 1621902444686,
                                img: "../public/image/goods/15.jpg",
                                pname: "虎牙直播",
                                price: 100,
                                sum: 2
                            },
                            {
                                id: 1621902392106,
                                img: "../public/image/goods/8.jpg",
                                pname: "新浪微博会员",
                                price: 100,
                                sum: 1,
                            }
                        ]

                    }]



                    localStorage.setItem("userList", JSON.stringify(userList))
                },

                loginShow() {
                    this.isloginShow = true
                    this.issignShow = false
                },
                signShow() {
                    this.isloginShow = false
                    this.issignShow = true
                },
                successMessage() {
                    this.$message.success('验证码已发送');
                },
                submit(type) {

                    if (type == 1) {
                        this.$refs['loginForm'].validate((valid) => {
                            if (valid) {

                                const userList = JSON.parse(localStorage.getItem("userList"))

                              
                                for(let i=0 ;i<userList.length;i++){
                                    if (userList[i].email == this.loginForm.email && userList[i].pwd == this
                                        .loginForm.password) {
                                              localStorage.setItem("user", JSON.stringify(userList[i]))
                                            window.location.href = '../index'

                                           return true
                                    }  
                                    
                                }
                                this.$message.error('账号或密码错误');
                                 
                                return true


                                // localStorage.setItem("")
                                // alert('submit!');

                            } else {
                                console.log('error submit!!');
                                return false;
                            }
                        });
                    }
                    if (type == 2) {
                        this.$refs['registerForm'].validate((valid) => {
                            if (valid) {
                                const userList = JSON.parse(localStorage.getItem("userList"))

                                let user = {
                                    id: new Date().getTime(), //用户ID
                                    email: this.registerForm.email, //用户邮箱
                                    tel: '11012011900', //用户手机号
                                    pwd: '123456', //密码
                                    chatId:'test2',
                                    order: [ //订单列表

                                    ]

                                }

                                userList.push(user)
                                this.$message.success('注册成功 默认密码 为 123456');
                                localStorage.setItem("userList", JSON.stringify(userList))


                            } else {
                                console.log('error submit!!');
                                return false;
                            }
                        });
                    }


                }

            }
        })
    </script>
</body>

</html>